<script>
import KtTableSearchOfTypeIsDatetime
  from "/src/components/node-kantboot/components/KtTable/InSearchComponents/KtTableSearchOfTypeIsDatetime.vue";
import KtTableSearchOfTypeIsNumber
  from "/src/components/node-kantboot/components/KtTable/InSearchComponents/KtTableSearchOfTypeIsNumber.vue";
import KtTableSearchOfTypeIsText
  from "/src/components/node-kantboot/components/KtTable/InSearchComponents/KtTableSearchOfTypeIsText.vue";

export default {
  components: {KtTableSearchOfTypeIsText, KtTableSearchOfTypeIsNumber, KtTableSearchOfTypeIsDatetime},
  props: {
    columns: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      columnsI18n: []
    }
  },
  mounted() {
    // 处理国际化
    this.columnsI18n = this.columns.map(column => {
      return {
        ...column,
        label: this.$i18n.zhToGlobal(column.label)
      }
    });
  },
  methods: {
    searchValueChange(column, value) {
      this.$emit('searchValueChange', column, value);
    },
    getBodyData() {
      this.$emit('getBodyData')
    }
  }
}
</script>

<template>
  <el-form
      label-position="top"
      @submit.native.prevent>

    <el-row gutter="20">
      <template v-for="column in columnsI18n">

        <el-col :span="column.span?column.span:4" v-if="column.isSearch">

          <el-form-item :label="column.label" :prop="column.field">

            <kt-table-search-of-type-is-text
                v-if="column.type === 'text'||column.type === 'textarea'"
                :column="column"
                :value="column.value"
                @searchValueChange="searchValueChange"
                @getBodyData="getBodyData">
            </kt-table-search-of-type-is-text>

            <kt-table-search-of-type-is-number
                v-if="column.type === 'number'"
                :column="column"
                :value="column.value"
                @searchValueChange="searchValueChange"
                @getBodyData="getBodyData"
            >
            </kt-table-search-of-type-is-number>

            <a-select
                v-if="column.type === 'enum'"
                style="width: 100%"
                @change="searchValueChange(column,$event);getBodyData();"
                :placeholder="column.placeholder">
              <a-select-option :value="''" :key="''">
                {{$i18n.zhToGlobal("全部")}}
              </a-select-option>
              <a-select-option
                  v-for="item in column.enumList"
                  :value="item.value"
                  :key="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>

            <kt-table-search-of-type-is-datetime
                v-if="column.type === 'datetime'"
                :column="column"
                :value="column.value"
                @searchValueChange="searchValueChange"
                @getBodyData="getBodyData"
            >
            </kt-table-search-of-type-is-datetime>

          </el-form-item>

        </el-col>
      </template>

      <el-col span="4">
        <el-form-item :label="$i18n.enToGlobal('search')">
          <a-button
              @click="getBodyData()"
              type="primary">
            {{ $i18n.enToGlobal('search') }}
          </a-button>
        </el-form-item>
      </el-col>

    </el-row>


  </el-form>
</template>

<style lang="scss" scoped>

</style>